<template>
  <div class="p-3">
    <a-row :gutter="[24, 8]">
      <a-col :span="12">
        <p>视频规则</p>
        <vxe-table :data="searchfilterData" max-height="400">
          <vxe-column field="keyword" title="关键词">
            <template #default="{ row }">
              {{ row.keyword }}
            </template>
          </vxe-column>
          <vxe-column field="video_count" title="视频总量">
            <template #default="{ row }">
              {{ row.video_count }}
            </template>
          </vxe-column>
          <vxe-column field="sort_type" title="排列依据">
            <template #default="{ row }">
              {{ row.sort_type }}
            </template>
          </vxe-column>
          <vxe-column field="publish_time" title="发布时间">
            <template #default="{ row }">
              {{ row.publish_time }}
            </template>
          </vxe-column>
          <vxe-column field="filter_during" title="视频时常">
            <template #default="{ row }">
              {{ row.filter_during }}
            </template>
          </vxe-column>
          <vxe-column field="search_range" title="范围">
            <template #default="{ row }">
              {{ row.search_range }}
            </template>
          </vxe-column>
          <vxe-column field="content_type" title="内容形式">
            <template #default="{ row }">
              {{ row.content_type }}
            </template>
          </vxe-column>
        </vxe-table>
      </a-col>
      <a-col :span="12">
        <p>评论规则</p>
        <vxe-table :data="commentfilterData" max-height="400">
          <vxe-column field="keywords" title="关键词" width="80px">
            <template #default="{ row }">
              {{ row.keywords.toString() }}
            </template>
          </vxe-column>
          <vxe-column field="digged" title="点赞" width="80px">
            <template #default="{ row }">
              {{ row.digged }}
            </template>
          </vxe-column>
          <vxe-column field="ip_label" title="ip标签">
            <template #default="{ row }">
              {{ row.ip_label.toString() }}
            </template>
          </vxe-column>
          <vxe-column field="enter_from" title="入口来源">
            <template #default="{ row }">
              {{ row.enter_from.toString() }}
            </template>
          </vxe-column>
        </vxe-table>
      </a-col>
    </a-row>

    <a-row :gutter="[24, 8]">
      <a-col :span="12">
        <a-card title="组合区" class="mt-3">
          <a-form
            ref="formRef"
            name="dynamic_form_nest_item"
            :model="combineForm"
          >
            <a-space
              v-for="(combine, index) in combineForm"
              style="display: flex; margin-bottom: 8px"
              align="baseline"
            >
              <a-form-item
                label="视频"
                :rules="{
                  required: true,
                  message: 'Missing sight',
                }"
              >
                <a-select
                  style="width: 400px"
                  v-model:value="combine.search_filter_id"
                >
                  <a-select-option
                    v-for="(opt, index) in searchfilterData"
                    :key="index"
                    :value="opt.id"
                  >
                    {{ opt.keyword }}
                  </a-select-option>
                </a-select>
              </a-form-item>
              <a-form-item
                label="评论"
                :rules="{
                  required: true,
                  message: 'Missing price',
                }"
              >
                <a-select
                  style="width: 400px"
                  v-model:value="combine.comment_filter_id"
                >
                  <a-select-option
                    v-for="(opt, index) in commentfilterData"
                    :key="index"
                    :value="opt.id"
                  >
                    {{ opt.keywords.toString() }}
                  </a-select-option>
                </a-select>
              </a-form-item>
              <a-space>
                <MinusCircleOutlined
                  class="hover:scale-110 duration-200"
                  @click="remove(combine)"
                  style="font-size: 24px"
                />
                <CheckCircleFilled
                  class="hover:scale-110 duration-200"
                  @click="confirm(combine)"
                  style="color: #00b96b; font-size: 24px"
                />
              </a-space>
            </a-space>
            <a-form-item>
              <a-button type="dashed" danger block @click="add">
                <PlusOutlined />
                添加组合
              </a-button>
            </a-form-item>
          </a-form>
        </a-card>
      </a-col>
      <a-col :span="12">
        <a-card title="已知组合" class="mt-3">
          <vxe-table :data="combineData" max-height="400">
            <vxe-column field="search_filter_id" title="视频规则ID">
              <template #default="{ row }">
                {{ row.search_filter_id }}
              </template>
            </vxe-column>
            <vxe-column field="keyword" title="视频关键词">
              <template #default="{ row }">
                {{ row.SearchFilter ? row.SearchFilter.keyword : "" }}
              </template>
            </vxe-column>
            <vxe-column field="comment_filter_id" title="评论规则ID">
              <template #default="{ row }">
                {{ row.comment_filter_id }}
              </template>
            </vxe-column>
            <vxe-column field="keywords" title="评论关键词">
              <template #default="{ row }">
                {{
                  row.CommentFilter ? row.CommentFilter.keywords.toString() : ""
                }}
              </template>
            </vxe-column>
            <vxe-column field="action" title="操作">
              <template #default="{ row }">
                <a-button
                  type="dashed"
                  danger
                  ghost
                  @click="separateCombine(row)"
                  >删除</a-button
                >
              </template>
            </vxe-column>
          </vxe-table>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<script setup lang="ts">
import { http } from "@/plugins/axios";
import { CheckOutlined } from "@ant-design/icons-vue";
const searchfilterData = ref([]);
const commentfilterData = ref([]);
const getSearchData = async () => {
  const { data } = await http.request({
    url: `searchfilter`,
    method: "GET",
  });
  searchfilterData.value = data;
};
const getCommentData = async () => {
  const { data } = await http.request({
    url: `commentfilter`,
    method: "GET",
  });
  commentfilterData.value = data;
};

const combineData = ref([]);
// 已知组合
const getCombine = async () => {
  const { data } = await http.request({
    url: `searchcomment`,
    method: "GET",
  });
  combineData.value = data;
};

const init = async () => {
  await getSearchData();
  await getCommentData();
  await getCombine();
};

// combineForm
const combineForm = ref([]);

const add = () => {
  combineForm.value.push({
    search_filter_id: "",
    comment_filter_id: "",
  });
};
const remove = (item) => {
  combineForm.value.splice(combineForm.value.indexOf(item), 1);
};
const confirm = async (item) => {
  await http.request({
    url: `searchcomment/combine`,
    method: "POST",
    data: item,
  });
  await init();
};
const separateCombine = async (item) => {
  await http.request({
    url: `searchcomment/separate`,
    method: "POST",
    data: item,
  });
  await init();
};
init();
</script>

<style></style>
